import { useState, useEffect } from 'react'
import { useStore } from '../store/useStore'

export default function Sidebar({ 
  isCollapsed, 
  onToggle,
  onOpenOrders,
  onOpenAddress,
  onOpenWelcome,
  onOpenHelp
}) {
  const [activeItem, setActiveItem] = useState('main')
  const [openDropdowns, setOpenDropdowns] = useState({})

  const toggleDropdown = (key) => {
    setOpenDropdowns(prev => ({
      ...prev,
      [key]: !prev[key]
    }))
  }

  const handleMenuClick = (itemId) => {
    setActiveItem(itemId)
    
    // 根据菜单项ID执行相应操作
    switch(itemId) {
      case 'main':
        window.scrollTo({ top: 0, behavior: 'smooth' })
        break
      case 'order-history':
      case 'order-pending':
      case 'order-payment':
      case 'orders':
        onOpenOrders?.()
        break
      case 'address':
        onOpenAddress?.()
        break
      case 'help':
        onOpenHelp?.()
        break
      case 'welcome':
        onOpenWelcome?.()
        break
      case 'home':
        window.scrollTo({ top: 0, behavior: 'smooth' })
        break
      default:
        break
    }
  }

  const menuItems = [
    {
      id: 'main',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
        </svg>
      ),
      label: '3D定制工坊',
      isActive: activeItem === 'main',
      color: 'text-blue-400',
      badge: '首页'
    },
    {
      type: 'divider'
    },
    {
      id: 'projects',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
        </svg>
      ),
      label: '我的项目',
      color: 'text-cyan-400'
    },
    {
      id: 'orders',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
        </svg>
      ),
      label: '订单管理',
      color: 'text-green-400',
      hasDropdown: true,
      dropdownItems: [
        { id: 'order-history', label: '订单历史', icon: '📋' },
        { id: 'order-pending', label: '待确认订单', icon: '⏳' },
        { id: 'order-payment', label: '待支付订单', icon: '💳' }
      ]
    },
    {
      id: 'address',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
      ),
      label: '地址管理',
      color: 'text-yellow-400'
    },
    {
      id: 'help',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      ),
      label: '帮助与支持',
      color: 'text-purple-400'
    },
    {
      type: 'divider'
    },
    {
      type: 'title',
      label: '快捷操作'
    },
    {
      id: 'welcome',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      ),
      label: '快速演示',
      small: true,
      color: 'text-blue-400'
    },
    {
      id: 'home',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
      ),
      label: '返回顶部',
      small: true,
      color: 'text-cyan-400'
    },
    {
      id: 'report',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      ),
      label: '错误报告',
      small: true,
      color: 'text-red-400'
    }
  ]

  return (
    <>
      {/* 移动端遮罩层 */}
      {!isCollapsed && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-39 lg:hidden animate-fade-in"
          onClick={onToggle}
          aria-label="关闭侧边栏"
        />
      )}
      
      <div 
        className={`h-screen bg-base-100 border-r border-white/10 flex flex-col transition-all duration-300 sticky top-0 z-40 ${
          isCollapsed ? 'w-20' : 'w-72'
        } ${!isCollapsed ? 'fixed lg:sticky' : ''}`}
        style={{
          background: 'rgba(23, 23, 23, 1)',
          borderRight: '1px solid rgba(56, 139, 253, 0.3)'
        }}
      >
      {/* 侧边栏内容 */}
      <div className="flex-1 overflow-y-auto custom-scrollbar p-4">
        <nav className="space-y-2">
          {menuItems.map((item, index) => {
            if (item.type === 'divider') {
              return (
                <div key={index} className="my-3 border-t border-white/10 opacity-30"></div>
              )
            }

            if (item.type === 'title') {
              if (isCollapsed) return null
              return (
                <div key={index} className="px-3 py-2 text-xs text-gray-500 font-semibold uppercase tracking-wider">
                  {item.label}
                </div>
              )
            }

            const isActive = activeItem === item.id || item.isActive
            const isOpen = openDropdowns[item.id]

            return (
              <div key={item.id}>
                <button
                  onClick={() => {
                    handleMenuClick(item.id)
                    if (item.hasDropdown) {
                      toggleDropdown(item.id)
                    }
                  }}
                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 group relative ${
                    item.small ? 'text-sm' : ''
                  } ${
                    isActive 
                      ? 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 text-white transform translate-x-1' 
                      : 'text-gray-400 hover:text-white hover:bg-white/5 hover:translate-x-1'
                  }`}
                  style={{
                    boxShadow: isActive ? '0 2px 4px rgba(56, 139, 253, 0.3)' : 'none'
                  }}
                >
                  <span className={`${item.color || 'text-gray-400'} ${isActive ? 'scale-110' : 'group-hover:scale-110'} transition-transform`}>
                    {item.icon}
                  </span>
                  {!isCollapsed && (
                    <>
                      <span className={`flex-1 text-left font-medium ${item.small ? 'text-sm' : ''}`}>
                        {item.label}
                      </span>
                      {item.badge && (
                        <span className="px-2 py-0.5 text-xs bg-blue-500/20 text-blue-400 rounded-full border border-blue-500/30">
                          {item.badge}
                        </span>
                      )}
                      {item.hasDropdown && (
                        <svg 
                          className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
                          fill="none" 
                          stroke="currentColor" 
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      )}
                    </>
                  )}
                </button>

                {/* 下拉菜单 */}
                {item.hasDropdown && isOpen && !isCollapsed && (
                  <div className="ml-11 mt-1 space-y-1 animate-slide-down">
                    {item.dropdownItems.map((subItem) => (
                      <button
                        key={subItem.id}
                        onClick={() => handleMenuClick(subItem.id)}
                        className={`w-full text-left px-3 py-2 text-sm rounded-lg transition-all duration-200 flex items-center gap-2 ${
                          activeItem === subItem.id
                            ? 'bg-white/10 text-white'
                            : 'text-gray-400 hover:text-white hover:bg-white/5'
                        }`}
                      >
                        {subItem.icon && <span className="text-base">{subItem.icon}</span>}
                        <span>{subItem.label}</span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            )
          })}
        </nav>
      </div>

      {/* 侧边栏底部 */}
      <div className="p-4 border-t border-white/10 space-y-3" style={{
        borderTop: '1px solid rgba(56, 139, 253, 0.3)',
        background: 'rgba(30, 30, 30, 1)'
      }}>

        {/* 联系客服按钮 */}
        {!isCollapsed ? (
          <button className="w-full px-4 py-2.5 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all flex items-center justify-center gap-2 border border-white/10 hover:border-blue-500/30">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
            <span>联系客服</span>
          </button>
        ) : (
          <button className="w-full px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all flex items-center justify-center border border-white/10 hover:border-blue-500/30">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </button>
        )}
      </div>
    </div>
    </>
  )
}

